import { getMenuListApi } from '@/api/menu'
import { nextTick, onMounted, reactive, ref } from 'vue'
export default function useTable() {
    //表格数据
    const tableList = reactive({
        list: []
    })
    //表格高度
    const tableHeight = ref(0)
    //表格的列
    const columns = [
        {
            title: '菜单名称',
            dataIndex: 'title',
            key: 'title',
            width: 180
        },
        {
            title: '图标',
            dataIndex: 'icon',
            key: 'icon'
        },
        {
            title: '上级菜单',
            dataIndex: 'parentName',
            key: 'parentName'
        },
        {
            title: '菜单类型',
            dataIndex: 'type',
            key: 'type'
        },
        {
            title: '路由名称',
            dataIndex: 'name',
            key: 'name'
        },
        {
            title: '路由地址',
            dataIndex: 'path',
            key: 'path'
        },
        {
            title: '组件路径',
            dataIndex: 'url',
            key: 'url'
        },
        {
            title: '操作',
            dataIndex: 'action',
            key: 'action',
            align: "center",
            width: 230
        },
    ];
    //获取表格数据
    const getList = async () => {
        let res = await getMenuListApi()
        if (res && res.code == 200) {
            tableList.list = res.data
        }
    }
    const refresh =  () => {
        getList()
    }
    onMounted(() => {
        getList()
        nextTick(() => {
            //表格高度计算
            tableHeight.value = window.innerHeight - 300
        })
    })
    return {
        tableList,
        tableHeight,
        columns,
        refresh
    }
}
